<template>
  <view class="root">
    <view class="top">
      <uni-easyinput prefixIcon="search" v-model="searchValue" placeholder="请输入姓名或身份证号" @input="input"
        class="search-input"></uni-easyinput>
    </view>
    <view class="content">
      <yy-scroll-view :static-params="staticParams" ref="scrllViewRef" request-url="/mini/wb/helpinfo/page"
        :auto-request="false">
        <template slot-scope="{list}">
          <view class="list-item-wrapper" v-for="(item, index) in list" :key="index" @click="handleDetail(item)">
            <view class="i-item-style">
              <view class="i-left-item">
                <image src="https://www.xazhsq.cn/webPicture/minilaw/man-1.png" class="img-v" v-if="item.sex == 1">
                </image>
                <image src="https://www.xazhsq.cn/webPicture/minilaw/woman-1.png" class="img-v" v-else></image>
              </view>
              <view class="i-right-item">
                <view class="name-wraper">
                  <view class="i-name">
                    {{item.name}}
                  </view>
                  <view class="i-device" v-if="item.isLine === '1'">
                    设备在线
                  </view>
                  <view class="i-device device-offline" v-if="item.isLine === '0'">
                    设备离线
                  </view>
                  <view class="bind" v-if="item.isBinding == 0" @click.stop="handleBindDevice(item)">
                    <image src="https://www.xazhsq.cn/webPicture/minilaw/bing-11.png" class="bind-icon"></image>
                    <view class="bind-text">
                      绑定设备
                    </view>
                  </view>
                  <image src="https://www.xazhsq.cn/webPicture/minilaw/right-more.png" class="more-img"></image>
                </view>
                <view class="list-item">
                  <view class="list-label">
                    身份证号:
                  </view>
                  <view class="list-value">
                    {{encryptIDCard(item.idCard)}}
                  </view>
                </view>
                <view class="list-item">
                  <view class="list-label">
                    关怀小组:
                  </view>
                  <view class="list-value">
                    {{item.helpCount ? `${item.helpCount}人` : '暂无'}}
                  </view>
                </view>
              </view>
            </view>
          </view>
        </template>
      </yy-scroll-view>
    </view>
    <yy-watermark></yy-watermark>
  </view>
</template>

<script>
  import {
    navTo,
    encryptIDCard
  } from '@/utils/util.js'
  import moment from '@/utils/moment'


  export default {
    data() {
      return {
        baseImgUrl: 'hihihi',
        scrllViewRef: null,
        searchValue: '',
        inputStyles: {
          background: '#f8f8f8',
          borderRadius: '340rpx 340rpx 340rpx 340rpx',
          border: '1rpx solid #F1F2F3',
        },
        staticParams: {},
        options: {}
      }
    },
    onLoad(options) {
      this.options = options
      Object.assign(this.staticParams, {
        companyId: this.options.companyMessageId
      })
      this.$refs.scrllViewRef.getList('init', this.staticParams)
      uni.$on('bind-success', () => {
        this.$refs.scrllViewRef.getList('init', this.staticParams)
      })
    },
    onUnload() {
      uni.$off('bind-success')
    },
    methods: {
      moment,
      encryptIDCard,
      input(val) {
        Object.assign(this.staticParams, {
          likeName: this.searchValue ? this.searchValue.trim() : '',
        })
        this.$refs.scrllViewRef.getList('init', this.staticParams)
      },
      handleAdd() {
        navTo({
          url: '/itemRegistration/secondHandMobile/secondHandMobileAdd',
          params: {
            companyMessageId: this.options.companyMessageId
          }
        })
      },
      handleDetail(item) {
        navTo({
          url: '/wristWatch/patientDetail',
          params: {
            ...item
          }
        })
      },
      handleBindDevice(item) {
        navTo({
          url: '/wristWatch/bindDevice',
          params: {
            ...item
          }
        })
      }
    }
  }
</script>

<style lang="scss" scoped>
  .root {
    display: flex;
    flex-direction: column;
    width: 100%;
    height: 100%;
    background: #F9F9F9;


    .top {
      padding: 25rpx;
      background: #FFFFFF;

      /deep/ .is-input-border {
        background: #F8F8F8 !important;
        border-radius: 340rpx 340rpx 340rpx 340rpx !important;
        border: 1rpx solid #F1F2F3 !important;
      }
    }

    .content {
      flex: 1;
      padding: 10rpx 15rpx;
      height: 0;
    }

    .list-item-wrapper {
      padding: 32rpx;
      background: #FFFFFF;
      border-radius: 16rpx 16rpx 16rpx 16rpx;
      margin-bottom: 14rpx;

      .i-item-style {
        display: flex;
        position: relative;

        .i-left-item {
          padding: 0 60rpx 41rpx 0;

          .img-v {
            width: 61rpx;
            height: 71rpx;
          }
        }

        .i-right-item {
          .name-wraper {
            display: flex;
            align-items: center;

            .i-name {
              font-weight: bold;
              font-size: 30rpx;
              color: #000000;
            }

            .i-device {
              padding: 2rpx 15rpx;
              background: #DFFFF4;
              border-radius: 19rpx 19rpx 19rpx 19rpx;
              font-weight: 500;
              font-size: 24rpx;
              color: #03A163;
              margin-left: 11rpx;
            }

            .device-offline {
              background: #EDEDED;
              color: #AAAAAA;
            }

            .bind {
              display: flex;
              align-items: center;
              background: #FEEDE5;
              border-radius: 20rpx 20rpx 20rpx 20rpx;
              padding: 2rpx 15rpx;
              margin-left: 11rpx;

              .bind-icon {
                width: 24rpx;
                height: 24rpx;
              }

              .bind-text {
                font-weight: 500;
                font-size: 28rpx;
                color: #FC590E;
              }
            }

            .more-img {
              width: 12rpx;
              height: 22rpx;
              position: absolute;
              right: 20rpx;
              top: 10rpx;
            }
          }
        }
      }

      .list-item-title {
        font-weight: bold;
        font-size: 30rpx;
        color: #181818;
      }

      .list-item {
        display: flex;
        margin-top: 18rpx;

        .list-label {
          font-weight: 500;
          flex-shrink: 0;
          font-size: 28rpx;
          color: #999999;
          margin-right: 5rpx;
          width: 120rpx;
        }

        .list-value {
          font-weight: 500;
          font-size: 28rpx;
          color: #101010;
        }
      }
    }

    .bottom {}
  }
</style>